<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>自定义表格</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
	href="${base}/css/jquery.searchableSelect.css">
<script type="text/javascript"
	src="${base}/js/jquery.searchableSelect.js"></script>

<script type="text/javascript" src="${base}/js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.js"></script>
<script src="${base}/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript"
	src="${base}/js/jquery.searchableSelect.js"></script>
	<style>
 select:focus option:checked{
 color: white;
 background-image:linear-gradient(#fada00, #fada00);}
} 

/*  select{margin-top: 1px;background: none;} */
        

/*
		option:checked, option:hover {
		    color: white;
		    background:url("");
		}
*/
//用一个1px X 1px 的图片颜色


	
	</style>
<script>
		$(function(){
			$("#tableName").blur(function(){
				var tableName = $(this).val();
				
				if(tableName != ""){
					$.post("${ pageContext.request.contextPath }/table/checkTableName",{"tableName":tableName},function(data){
		 				if(data == 1){
		 					$("#s1").html("<font color='green'>该表格名可以使用</font>");
		 					$("#saveTable").attr("disabled",false);
		 				}else if(data == 2){
		 					$("#s1").html("<font color='red'>该表格名已经存在</font>");
		 					$("#saveTable").attr("disabled",true);
	 	 				}
	 	 			});
	 			}else{
	 				$("#s1").html("<font color='red'>表格名不能为空</font>");
	 				$("#saveTable").attr("disabled",true);
	 			}
	 		});
			
				
				$('#memberName123').searchableSelect();
				
				
				$("#selectAll").click(function(){
					alert(11);
					$(":checkbox[name='ids']").prop("checked",this.checked);
				});

			
	 		
	 	});
			
</script>
</head>

<body>
	<!--整体div-->
	<div class="container">
		<jsp:include page="${path}/menu.jsp"></jsp:include>
		<form action="${ pageContext.request.contextPath }/table/createTable2?projectId=${project.id}&userId=${user.id}"
			method="post">
			<div class="form-group">
				<div class="col-sm-4">
					<input type="text" class="form-control" id="tableName"
						name="tableName" placeholder="请输入表格名称">
				</div>
				<span id="s1"></span>
				<br>
			</div>
			<div style="padding-top: 20px">
				<a onclick="changey()"><input  type="button"
							class="btn btn-success" value="设置该列为下拉框"></a>
							<a onclick="tiaose()"><input  type="button"
							class="btn btn-success" value="请为该列下拉框配置颜色"></a>
			</div>
			<div class="container">
				<div style="overflow-x: scroll; width: 100%; white-space: nowrap;">
				
					
			
					<!-- alan_18.3.2_start_update_style -->
					<!-- <table class="table table-condensed table table-bordered" -->
					<table class="table table-striped table-bordered table-hover dataTables-example"
						style="width: 100%; table-layout: fixed; margin-top: 50px; overflow: auto"
						align="center" id="table" border="1">
						<thead>
							<tr id="tr1" style="height: 30px;" >
								<th class="td" style="width: 120px; height: auto;"><input
									name="colName1" type="text " placeholder="请输入列名" class="tr1-td"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>
								<th class="td" style="width: 120px; height: auto;"><input
									name="colName2" type="text" placeholder="请输入列名" class="tr1-td"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>
								<th class="td" style="width: 120px; height: auto;"><input
									name="colName3" type="text " placeholder="请输入列名" class="tr1-td"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>
								<th class="td" style="width: 120px; height: auto;"><input
									name="colName4" type="text" placeholder="请输入列名" class="tr1-td"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>
								<th class="td" style="width: 120px; height: auto;"><input
									name="colName5" type="text " placeholder="请输入列名" class="tr1-td"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>
								<th class="td" style="width: 120px; height: auto;"><input
									name="colName6" type="text" placeholder="请输入列名" class="tr1-td"
									style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>
							
							</tr>
						</thead>
						<tbody>
					
						<c:forEach begin="1" end="4" step="1" varStatus="status">
						<c:if test="${status.index == 1 }">
						
						
							<tr id="tr2" style="height: 30px;">
							<c:set var="b" value="1"></c:set>
							<c:forEach begin="1" end="6" step="1" >
							
							
									<td class="colName${b}first">
									<input  class="tr2-td" type="text" style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;">
									<input type="hidden" name="colType${b }" value="0"/>
									<input type="hidden" name="defVal${b }" id="defVal${b }" value=""/>
									</td>
									 <c:set var="b" value="${b+1 }"></c:set>
							
								
								
								</c:forEach>
								</tr>
								</c:if>
								
								<c:if test="${status.index != 1 }">
										
						
						
							<tr class="tr3" style="height: 30px;">
							<c:set var="aa" value="1"></c:set>
							<c:forEach begin="1" end="6" step="1" >
							
							
							
								
								<td class="colName${aa}">
								<input  class="tr3-td${status.index}" type="text" style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;">
								</td>
								 <c:set var="aa" value="${aa+1 }"></c:set>
								
								</c:forEach>
								</tr>
							
								
								
								 </c:if>
								</c:forEach>
								
							
						</tbody>
					</table>
					<!-- alan_18.3.2_end_update_style -->
				</div>
				<input  type="hidden"  id="totalNumber" name="totalNumber"  value="6"/>
				<p style="color: red;">注：请单击列名为该列配置列类型或者为该列下拉框各选项配置颜色</p>
				<!-- <button type="button" class="btn btn-primary"
				onclick="AddRow(document.getElementById('table'),1)">增加一行</button> -->
				<button type="button" class="btn btn-primary"
					onclick="ccc()">测试</button>
				<button type="button" class="btn btn-primary"
					onclick="addCell(id++)">增加一列</button>
				<input id="saveTable" type="submit" class="btn btn-primary" value="保存表格">
				 
			</div>
		</form>
			<div class="container">
   
    
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击我显示模态框</button>
    <!--  定义模态框触发器，此处为按钮触发  -->

    <form method="post" action="" class="form-horizontal" role="form"
							id="myForm" onsubmit="return ">
							<div class="modal fade" id="myModal" role="dialog" tabindex=-1
								aria-labelledby="myModalLabel" aria-hidden="true">
								<!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
								<div class="modal-dialog">
									<!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
									<div class="modal-content">
										<!--  显示模态框白色背景，所有内容都写在这个div里面  -->

										<div class="btn-info modal-header">
											<!--  模态框标题  -->
											<button type="button" class="close" data-dismiss="modal">&times;</button>
											<!--  关闭按钮  -->
											<h4>添加成员</h4>
											<!--  标题内容  -->
										</div>

										<div class="modal-body">
											<!--  模态框内容，我在此处添加一个表单 -->
											<form class="form-horizontal" role="form">
												<div class="form-group">
													<label for="memberName" class="col-sm-2 control-label">成员姓名:</label>
													<div class="col-sm-6">
														<input type="hidden" name="projectId" value="${project.id }">
														<select  id="memberName123" name="memberName">
														
															<option value="">请选择或者输入成员姓名</option>
															<c:forEach items="${users}" var="user">
																<option value="${user.name }">${user.name }</option>
															</c:forEach>
														</select>
													</div>
												</div>

											</form>
										</div>

										<div class="modal-footer">
											<!--  模态框底部样式，一般是提交或者确定按钮 -->
											<button  class="btn btn-info" onclick="addMember()" >确定</button>
											<button type="button" class="btn btn-default"
												data-dismiss="modal">取消</button>
										</div>

									</div>
									<!-- /.modal-content -->
								</div>
							</div>
							<!-- /.modal -->
						</form>
</div>
	</div>
	
	
	
</body>
<script type="text/javascript">


		var toNumber = $("#totalNumber").val();
		var totalNumber = parseInt(toNumber);
		

		var el = window.document.body;//声明一个变量，默认值为body
		window.document.body.onclick = function(event){
		  el = event.target;//鼠标每经过一个元素，就把该元素赋值给变量el
		  console.log('当前鼠标在', el, '元素上');//在控制台中打印该变量
		}	 
		
		

		function ccc(){
			alert($(el).attr("class"));
			
			alert($('.tr2-td').attr("class"));
			$(el).attr("readonly",'readonly');
			$(el).parent().append('<input type="hidden" value="123"></input>');
			
/* 			$('.$(el).attr("class")').attr("readonly",readonly); */
			
		  }

		function tiaose(){
			
			var name = $(el).attr("name");
		
			var ip="defVal"+(parseInt($(el).parent().index())+1);
			
			
			data=name+","+ip;
		    layer.open({
		      type: 2,
		      title: '下拉框颜色选配',
		      maxmin: true,
		      shadeClose: true, //点击遮罩关闭层
		      area : ['600px' , '850px'],
		      content: 'http://127.0.0.1:8082/Excel/index3333.html'
		    
		      /*  content: 'http://baidu.com' */
		    	 
		      
		    });
		  };
		
		  
		  
		function ceshi(){
	
			
 		var all = "";
			alert($("#abc option").id);
			$("#abc option").each(function() {
			    all += $(this).attr("value")+"||";
			});
			 layer.open({
			      type: 1,
			      area: ['600px', '360px'],
			      shadeClose: true, //点击遮罩关闭
			      content: '\<\div style="padding:20px;">自定义内容\<\/div>'
			    }); 
		  };
		  
		 
		  
		function changey(){
			var name = $(el).attr("name");
			
			
			var num=prompt("请输入下拉框有几个值","2");  
			if(num == 2){
				var val1=prompt("请输入下拉框第一个值","");  
				var val2=prompt("请输入下拉框第二个值","");

			       $("."+name).html("");
			       $("."+name).append('<select  id="'+name+'" style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option></select>');
			      var num =  name.substring(7,name.length);
			       $("."+name+"first").html("");
			       $("."+name+"first").append('<select  id="'+name+'"  style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option><input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/></select><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>');
			     
			}else if(num == 3){
				var val1=prompt("请输入下拉框第一个值","");  
				var val2=prompt("请输入下拉框第二个值","");
				var val3=prompt("请输入下拉框第三个值","");
				$("."+name).html("");
			       $("."+name).append('<select  id="'+name+'" style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option><option value="'+val3+'">'+val3+'</option></select>');
			      var num =  name.substring(7,name.length);
			       $("."+name+"first").html("");
			       $("."+name+"first").append('<select  id="'+name+'"  style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option><option value="'+val3+'">'+val3+'</option></select><input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>');
			     
				
			
			}else if(num == 4){
				var val1=prompt("请输入下拉框第一个值","");  
				var val2=prompt("请输入下拉框第二个值","");
				var val3=prompt("请输入下拉框第三个值","");
				var val4=prompt("请输入下拉框第四个值","");
				$("."+name).html("");
			       $("."+name).append('<select  id="'+name+'" style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option><option value="'+val3+'">'+val3+'</option><option value="'+val4+'">'+val4+'</option></select>');
			      var num =  name.substring(7,name.length);
			       $("."+name+"first").html("");
			       $("."+name+"first").append('<select  id="'+name+'"  style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option><option value="'+val3+'">'+val3+'</option><option value="'+val4+'">'+val4+'</option></select><input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>');
			     
			}
			
			/* var all = "";
			alert($("#abc option"));
			alert("-----");
			alert($("abc option"));
			$("#abc option").each(function() {
			    all += $(this).attr("value")+" ";
			});
			alert(all); */
			
		     
		     
		  };

	  
	  
	//需要设置一个隐藏input ，表示列数，每增加一列改变value
	function addCell(id) {
		var toNumber = $("#totalNumber").val();
		var totalNumber = parseInt(toNumber);
		alert(totalNumber);
		id = id + 7;
		
		$("#tr1")
				.append(
						'<th style="width: 120px;height:auto; " class="td"><input name="colName'+id+'" type="text " placeholder="请输入列名" style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></th>');

		
		$("#tr2")
				.append(
						'<td class="colName'+id+'first"><input type="text" style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;">'
						+'<input type="hidden" name="colType'+id+'" value="0"/>'
						+'<input type="hidden" name="defVal'+id+'" id="defVal'+id+'" value=""/></td>');
		
		$(".tr3")
				.append(
						'<td class="colName'+id+'"><input type="text" style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></td>');
		
		alert(totalNumber+1);
		
		$("#totalNumber").val(totalNumber+1);
		alert($("#totalNumber").val());
	}
	function addRow() {
		var tr = document.createElement('tr');
		tr.className = "tr";
		var tbody = document.getElementById("tbody");
		var rows = table.rows.length;
		var cells = table.rows.item(0).cells.length;
		tbody.appendChild(tr);
		for (var i = 0; i < cells; i++) {
			var inputi = document.createElement('input');
			inputi.style.border = "none";
			inputi.style.height = "46px";
			inputi.style.font.size = "10px";
			var tdi = document.createElement('td');
			tdi.appendChild(inputi);
			tdi.className = "td";
			tdi.style.height = "46px";
			tdi.style.width = " 5%";
			tr.appendChild(tdi);
		}
	}

	/* $(".trr").bind("mouseover", function() {
		$(this).css("background-color", "#eeeeee");
	})
	$(".trr").bind("mouseout", function() {
		$(this).css("background-color", "#ffffff");
	}) */
</script>
</html>


